<template>
  <!-- <div> 工单看板 </div> -->
  <div>
    <div class="search-box">
      <div class="time-box">

        <div class="crud-btn-container">
          <div class="crud-item crud-all" :class="[workorderTimeStatus=='1'?'crud-active':'']" @click="getTime('1')">本周
          </div>
          <div class="crud-item crud-commit" :class="[workorderTimeStatus=='2'?'crud-active':'']" @click="getTime('2')">
            上周</div>
          <div class="crud-item crud-deal" :class="[workorderTimeStatus=='3'?'crud-active':'']" @click="getTime('3')">本月
          </div>
          <div class="crud-item crud-accept" :class="[workorderTimeStatus=='4'?'crud-active':'']" @click="getTime('4')">
            上月</div>
          <div class="crud-item crud-copy" :class="[workorderTimeStatus=='5'?'crud-active':'']"
            style="border-right: none;" @click="getTime('5')">自定义</div>
        </div>

        <div v-if="customTimeShow" class="input-box" style="margin-left: 20px;">
          <el-date-picker v-model="customTime" value-format="yyyy-MM-dd" type="daterange"
            :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" @change="customTimeChange"
            :picker-options="pickerOptions0" />
        </div>

      </div>

      <div class="point-box" style="margin-left: 20px;">

        <div class="input-box">
          <label style="margin-right: 10px;">所属网点</label>
          <addr-branch ref="addrbranch" :select_level='1' @changenode="handleAddr" />
        </div>

        <!-- <el-button class="plain-btn reset-btn" size="medium" @click="getWorkorderInfoModify()">搜索</el-button> -->
        <el-button class="plain-btn reset-btn" size="medium" @click="WorkOrderKanbanReset()">重置</el-button>

      </div>

    </div>

    <!-- 工单总数 -->
    <div class="work-order">
      <div class="item">
        <div class="content">
          <div class="number">
            <b>{{ workorderTotal }}</b>
            <span>环比{{ queryChainInfo }}% <i>↑</i></span>
          </div>
          <p>工单总数</p>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="number">
            <b>{{ toBeRectified }}</b>
          </div>
          <p>至今待整改</p>
        </div>
        <div id="toBeRectified" class="pie" />
      </div>
      <div class="item">
        <div class="content">
          <div class="number">
            <b>{{ toBeAccepted }}</b>
          </div>
          <p>至今待验收</p>
        </div>
        <div id="toBeAccepted" class="pie" />
      </div>
      <div class="item">
        <div class="content">
          <div class="number">
            <b>{{ completed }}</b>
          </div>
          <p>至今已完成</p>
        </div>
        <div id="completed" class="pie" />
      </div>
    </div>

    <!-- 每日事件数量分布 -->
    <div class="daily-events">
      <div class="left-box">
        <p>每日事件数量分布</p>
        <div id="dailyEventsBar" class="daily-events-bar" />
      </div>
      <div class="right-box">
        <div class="priority">
          <label>优先级</label>
          <div class="opt">
            <div :class="[params.priority=='0'?'on':'']" @click="getRectifyCount('0')">全部</div>
            <div :class="[params.priority=='1'?'on':'']" @click="getRectifyCount('1')">高</div>
            <div :class="[params.priority=='2'?'on':'']" @click="getRectifyCount('2')">中</div>
            <div :class="[params.priority=='3'?'on':'']" @click="getRectifyCount('3')">低</div>
          </div>
        </div>
        <div id="priority" class="pie" />
        <p>平均按期整改率</p>
      </div>
    </div>

    <!-- 优先级分布-问题项排名 -->
    <div class="flex-box">
      <div class="priority-distribution">
        <p>优先级分布</p>
        <div id="priorityDistribution" class="pie" />
      </div>
      <div class="question">
        <div class="title">
          <span>问题项排名</span>
          <i>···</i>
        </div>
        <div class="list-box">
          <ul>
            <li v-for="(item,index) in queryCheckItemInfo" :key="index">
              <i>{{ index+1 }}</i>
              <span>{{ item.ciName }}</span>
              <b>{{ item.num }}</b>
              <el-button type="primary" plain size="mini" @click="queryCheckItemDetails(item.ciId)">网点详情</el-button>
            </li>

          </ul>
        </div>
      </div>
    </div>

    <!-- 整改问题逾期情况 -->
    <div class="flex-box">
      <div class="store-box">
        <div class="title">
          <span>整改问题逾期情况 - 网点维度</span>
          <i>···</i>
        </div>
        <div class="table">
          <div class="header">
            <label>门店名称</label>
            <span>问题整改逾期率</span>
          </div>
          <ul>
            <li v-for="(item,index) in queryOverdueCountInfo" :key="index">
              <i>{{ index+1 }}</i>
              <p>{{ item.name }}</p>
              <span>{{ item.num*100 }}%</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="staff-box">
        <div class="title">
          <span>整改问题逾期情况 - 人员维度</span>
          <i>···</i>
        </div>
        <div class="staff-header">
          <span>逾期率</span>
          <span>人数</span>
          <span>占比</span>
        </div>
        <div id="staff" class="pic" />
      </div>
    </div>

    <!-- 网点详情 -->
    <el-dialog title="网点详情" :visible.sync="queryCheckItemVisible" center>
      <el-table :data="queryCheckItemDetailInfo">
        <el-table-column label="序号" width="80">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column property="name" label="网点名称" />
        <el-table-column property="num" label="次数" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import AddrBranch from '@/components/Address/AddrBranchSelect.vue'
  import {
    getProvinces,
    getCity,
    getArea,
    getStreet
  } from '@/api/address'
  import {
    branchList
  } from '@/api/branch'
  import {
    queryOrderCount,
    queryChain,
    queryRectifyCount,
    queryFlowCount,
    queryPriority,
    queryCheckItem,
    queryCheckItemDetail,
    queryOverdueCount,
    queryOverdueCountUser
  } from '@/api/workorder'

  export default {
    name: '',
    components: {
      AddrBranch
    },
    data() {
      // const name
      return {
        startPlaceholder: '',
        endPlaceholder: '',
        // 设置至今为止的时间选择
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        //判断有没有选中网点
        NodeJudgment: '',
        // 选择时间
        customTime: '', // 自定义时间
        customTimeShow: false, // 是否显示自定义时间
        workorderTimeStatus: '1', // 选择的时间段，默认本周
        createTimeFrom: '',
        createTimeTo: '',
        // 查询数据所需参数
        params: {
          pointId: '',
          createTimeFrom: '', // 起始时间
          createTimeTo: '', // 结束时间
          priority: '0'
        },
        toBeRectified: 0, // 至今待整改
        toBeAccepted: 0, // 至今待验收
        completed: 0, // 至今已完成
        workorderTotal: [], // 工单总数
        queryChainInfo: [], // 环比
        queryRectifyCountInfo: [], // 平均按时整改率
        queryFlowCountInfo: [], // 每日事件数量分布
        queryPriorityInfo: [], // 优先级分布
        queryCheckItemInfo: [], // 问题项排名
        queryCheckItemDetailInfo: [], // 问题项排名网点详情
        queryOverdueCountInfo: [], // 问题整改逾期率-门店维度
        queryOverdueCountUserInfo: [], // 问题整改逾期率-人员维度
        queryCheckItemVisible: false, // 问题项排名-网点详情
        // 选择网点
        pointOpt: [], // 网点选项
        pointAddress: [], // 网点地址
        addressProps: {
          lazy: true,
          emitPath: false,
          lazyLoad(node, resolve) {
            console.log(node)
            const {
              level
            } = node
            setTimeout(() => {
              if (node.level == 0) {
                getProvinces().then(res => {
                  const provinces = res.data.map((value, i) => ({
                    value: value.provinceCode,
                    label: value.provinceName,
                    leaf: node.level >= 3
                  }))
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(provinces)
                })
              }
              if (node.level == 1) {
                const params = {
                  provinceCode: node.value
                }
                getCity(params).then(res => {
                  const cities = res.data.map((value, i) => ({
                    value: value.cityCode,
                    label: value.cityName,
                    leaf: node.level >= 3
                  }))
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(cities)
                })
              } else if (node.level == 2) {
                const params = {
                  cityCode: node.value
                }
                getArea(params).then(res => {
                  const area = res.data.map((value, i) => ({
                    value: value.areaCode,
                    label: value.areaName,
                    leaf: node.level >= 3
                  }))
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(area)
                })
              } else if (node.level == 3) {
                console.log(node)
                const params = {
                  areaCode: node.value
                }
                getStreet(params).then(res => {
                  const street = res.data.map((value, i) => ({
                    value: value.streetCode,
                    label: value.streetName,
                    leaf: node.level >= 3
                  }))
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(street)
                })
              }
            })
          }
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.Lastdays()
    },
    mounted() {
      // 默认本周数据
      this.getTime('1')
    },
    methods: {
      // 获取最近30天
      Lastdays() {
        let myDate = new Date()
        let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30)

        let lastY = lw.getFullYear()
        let lastM = lw.getMonth() + 1
        let lastD = lw.getDate()
        let lastYarr = myDate.getFullYear()
        let lastMarr = myDate.getMonth() + 1
        let lastDarr = myDate.getDate()

        let startdate = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD)
        let startdatetow = lastYarr + "-" + lastMarr + "-" + lastDarr

        this.startPlaceholder = startdate
        this.endPlaceholder = startdatetow
      },
      // 重置功能
      WorkOrderKanbanReset() {
        this.customTime = ''
        this.params.createTimeFrom = ''
        this.params.createTimeTo = ''
        this.getTime('5')
        this.$refs['addrbranch'].clearNodes()

        this.Lastdays()
        this.getWorkorderInfo()
      },
      // 新网点选择
      handleAddr(code, level, newval) {
        this.NodeJudgment = level

        if (level == 4) {
          this.params.pointId = code
        } else {
          this.params.pointId = ''
        }

        this.getWorkorderInfoModify()

        console.log('判断 :>> ', this.NodeJudgment);
        console.log('网点 :>> ', this.params.pointId);
      },
      // 获取时间
      getTime(status) {
        this.customTimeShow = false
        this.params.createTimeFrom = ''
        this.params.createTimeTo = ''
        let date = new Date()
        let _createTimeFrom
        if (status == '1') { // 本周
          this.workorderTimeStatus = '1'
          date.setDate(date.getDate() - date.getDay() + 1)
          this.params.createTimeFrom = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()

          date = new Date()
          this.params.createTimeTo = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        } else if (status == '2') { // 上周
          this.workorderTimeStatus = '2'
          // 上周一的日期
          date.setDate(date.getDate() - 7 - date.getDay() + 1)
          this.params.createTimeFrom = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
          // 上周日的日期
          date.setDate(date.getDate() + 6)
          this.params.createTimeTo = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        } else if (status == '3') { // 本月
          this.workorderTimeStatus = '3'
          this.params.createTimeFrom = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + '1' // 本月第一天
          this.params.createTimeTo = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        } else if (status == '4') { // 上月
          this.workorderTimeStatus = '4'
          var year = date.getFullYear()
          var month = date.getMonth()
          if (month == 0) {
            month = 12
            year = year - 1
          }
          if (month < 10) {
            month = month
          }

          var myDate = new Date(year, month, 0)
          this.params.createTimeFrom = year + '-' + month + '-' + '1' // 上个月第一天
          this.params.createTimeTo = year + '-' + month + '-' + myDate.getDate()
        } else if (status == '5') {

          // 获取最近30天时间
          let myDate = new Date()
          let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30)

          let lastY = lw.getFullYear()
          let lastM = lw.getMonth() + 1
          let lastD = lw.getDate()
          let lastYarr = myDate.getFullYear()
          let lastMarr = myDate.getMonth() + 1
          let lastDarr = myDate.getDate()

          let startdate = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD)
          let startdatetow = lastYarr + "-" + lastMarr + "-" + lastDarr

          this.params.createTimeFrom = startdate
          this.params.createTimeTo = startdatetow

          this.workorderTimeStatus = '5'
          this.customTimeShow = true
        }
        this.getWorkorderInfo()
      },
      // 自定义时间选择
      customTimeChange(e) {
        if (e) {
          this.params.createTimeFrom = e[0]
          this.params.createTimeTo = e[1]
        } else {
          // 获取最近30天时间
          let myDate = new Date()
          let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30)

          let lastY = lw.getFullYear()
          let lastM = lw.getMonth() + 1
          let lastD = lw.getDate()
          let lastYarr = myDate.getFullYear()
          let lastMarr = myDate.getMonth() + 1
          let lastDarr = myDate.getDate()

          let startdate = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD)
          let startdatetow = lastYarr + "-" + lastMarr + "-" + lastDarr

          this.params.createTimeFrom = startdate
          this.params.createTimeTo = startdatetow
        }
        this.getWorkorderInfo()
      },
      // 网点所属选择
      addressChange() {
        if (!this.pointAddress) {} else {
          const data = {
            provinceCode: this.pointAddress[0],
            cityCode: this.pointAddress[1],
            areaCode: this.pointAddress[2],
            streetCode: this.pointAddress[3]
          }
          // 根据网点所属获取网点列表
          branchList(data).then(res => {
            console.log('网点列表', res)
            this.pointOpt = res.data
          })
        }
      },
      // 平均按期整改率-优先级选择
      getRectifyCount(val) {
        this.params.priority = val
        // 查询平均按时整改率
        queryRectifyCount(this.params).then(res => {
          if (res.data == "<1%") {
            this.queryRectifyCountInfo = 0.01
            this.initPriorityPic('priority', this.queryRectifyCountInfo)
          } else if (res.data == null) {
            this.queryRectifyCountInfo = 0.00
            this.initPriorityPic('priority', this.queryRectifyCountInfo)
          } else {
            this.queryRectifyCountInfo = res.data
            this.initPriorityPic('priority', this.queryRectifyCountInfo)
          }
        })
      },
      // 问题项排名-网点详情
      queryCheckItemDetails(id) {
        // 查询问题项排名详情
        const data = {
          ciId: id,
          createTimeFrom: this.params.createTimeFrom, // 起始时间
          createTimeTo: this.params.createTimeTo // 结束时间
        }
        queryCheckItemDetail(data).then(res => {
          console.log(res)
          this.queryCheckItemDetailInfo = res.data
        })

        this.queryCheckItemVisible = true
      },
      // 搜索用的获取页面数据
      getWorkorderInfoModify() {
        // 查询工单数量按照status分组
        if (this.NodeJudgment == '') {
          this.$message({
            message: '还未选择网点',
            type: 'warning'
          })
        } else if (this.NodeJudgment == 4) {
          queryOrderCount(this.params).then(res => {
            console.log(res)
            const data = res.data
            this.workorderTotal = 0
            this.toBeRectified = 0
            this.toBeAccepted = 0
            this.completed = 0
            data.forEach((item, index) => {
              this.workorderTotal = this.workorderTotal + item.num
              if (item.status == '1') {
                this.toBeRectified = item.num
              } else if (item.status == '2') {
                this.toBeAccepted = item.num
              } else if (item.status == '3') {
                this.completed = item.num
              }
            })
            // 工单总数环形图
            this.initWorkOrderPie('toBeRectified', this.toBeRectified, this.workorderTotal)
            this.initWorkOrderPie('toBeAccepted', this.toBeAccepted, this.workorderTotal)
            this.initWorkOrderPie('completed', this.completed, this.workorderTotal)
          })
          // 查询环比
          queryChain(this.params).then(res => {
            console.log(res)
            this.queryChainInfo = res.data
          })
          // 查询每日事件数量分布
          queryFlowCount(this.params).then(res => {
            console.log(res)
            this.queryFlowCountInfo = res.data
            // 每日数量分布柱状图
            this.initDailyEventsBar('dailyEventsBar', this.queryFlowCountInfo)
          })
          // 查询平均按时整改率
          queryRectifyCount(this.params).then(res => {
            if (res.data == "<1%") {
              this.queryRectifyCountInfo = 0.01
              this.initPriorityPic('priority', this.queryRectifyCountInfo)
            } else if (res.data == null) {
              console.log('进来吧 :>> ');
              this.queryRectifyCountInfo = 0.00
              this.initPriorityPic('priority', this.queryRectifyCountInfo)
            } else {
              this.queryRectifyCountInfo = res.data
              this.initPriorityPic('priority', this.queryRectifyCountInfo)
            }
          })
          // 查询优先级分布
          queryPriority(this.params).then(res => {
            console.log(res)
            this.queryPriorityInfo = res.data
            // 优先级分布环形图
            this.initPriorityDistributionPic('priorityDistribution', this.queryPriorityInfo)
          })
          // 查询问题项排名
          queryCheckItem(this.params).then(res => {
            console.log(res)
            this.queryCheckItemInfo = res.data
          })

          // 查询问题整改逾期率-门店维度
          queryOverdueCount(this.params).then(res => {
            console.log(res)
            this.queryOverdueCountInfo = res.data
          })
          // // 查询问题整改逾期率-人员维度
          queryOverdueCountUser(this.params).then(res => {
            console.log(res)
            this.queryOverdueCountUserInfo = res.data
            // 整改问题逾期情况-人员维度
            this.initStaffPic('staff', this.queryOverdueCountUserInfo)
          })
        } 
      },
      // 获取页面数据
      getWorkorderInfo() {
        // 查询工单数量按照status分组
        console.log('这个到底是何方神圣 :>> ', this.params);

        queryOrderCount(this.params).then(res => {
          console.log(res)
          const data = res.data
          this.workorderTotal = 0
          this.toBeRectified = 0
          this.toBeAccepted = 0
          this.completed = 0
          data.forEach((item, index) => {
            this.workorderTotal = this.workorderTotal + item.num
            if (item.status == '1') {
              this.toBeRectified = item.num
            } else if (item.status == '2') {
              this.toBeAccepted = item.num
            } else if (item.status == '3') {
              this.completed = item.num
            }
          })
          // 工单总数环形图
          this.initWorkOrderPie('toBeRectified', this.toBeRectified, this.workorderTotal)
          this.initWorkOrderPie('toBeAccepted', this.toBeAccepted, this.workorderTotal)
          this.initWorkOrderPie('completed', this.completed, this.workorderTotal)
        })
        // 查询环比
        queryChain(this.params).then(res => {
          console.log(res)
          this.queryChainInfo = res.data
        })
        // 查询每日事件数量分布
        queryFlowCount(this.params).then(res => {
          console.log(res)
          this.queryFlowCountInfo = res.data
          // 每日数量分布柱状图
          this.initDailyEventsBar('dailyEventsBar', this.queryFlowCountInfo)
        })
        // 查询平均按时整改率
        queryRectifyCount(this.params).then(res => {
          if (res.data == "<1%") {
            this.queryRectifyCountInfo = 0.01
            this.initPriorityPic('priority', this.queryRectifyCountInfo)
          } else if (res.data == null) {
            console.log('进来吧 :>> ');
            this.queryRectifyCountInfo = 0.00
            this.initPriorityPic('priority', this.queryRectifyCountInfo)
          } else {
            this.queryRectifyCountInfo = res.data
            this.initPriorityPic('priority', this.queryRectifyCountInfo)
          }
        })
        // 查询优先级分布
        queryPriority(this.params).then(res => {
          console.log(res)
          this.queryPriorityInfo = res.data
          // 优先级分布环形图
          this.initPriorityDistributionPic('priorityDistribution', this.queryPriorityInfo)
        })
        // 查询问题项排名
        queryCheckItem(this.params).then(res => {
          console.log(res)
          this.queryCheckItemInfo = res.data
        })

        // 查询问题整改逾期率-门店维度
        queryOverdueCount(this.params).then(res => {
          console.log(res)
          this.queryOverdueCountInfo = res.data
        })
        // // 查询问题整改逾期率-人员维度
        queryOverdueCountUser(this.params).then(res => {
          console.log(res)
          this.queryOverdueCountUserInfo = res.data
          // 整改问题逾期情况-人员维度
          this.initStaffPic('staff', this.queryOverdueCountUserInfo)
        })
      },
      // 工单总数环形图
      initWorkOrderPie(id, value, total) {
        const chartDom = document.getElementById(id)
        const myChart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: function() {
              var f = parseFloat(value / total * 100)
              f = Math.round(value / total * 100)
              return f + '%'
            }
          },
          color: ['#1684fc', '#f1f1f1'],
          series: [{
            type: 'pie',
            radius: ['75%', '100%'],
            hoverAnimation: false,
            label: {
              show: false,
              position: 'none'
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [{
              value: value
            }, {
              value: total - value
            }]
          }]
        }
        // 移除鼠标移动变色效果
        myChart.on('mouseover', e => {
          const op = myChart.getOption()
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: e.dataIndex,
            color: e.color
          })
          myChart.setOption(op, true)
        })
        // 生成环形图
        option && myChart.setOption(option)
      },

      // 每日数量分布
      initDailyEventsBar(id, data) {
        const timeData = [] // 时间
        const statusCountData = [] // 当日全部事件
        const overdueCountData = [] // 当日已逾期
        const rectifyPercentageData = [] // 按期整改率
        data.forEach((item) => {
          if (!item.statusCount) item.statusCount = 0
          if (!item.overdueCount) item.overdueCount = 0
          if (!item.rectifyPercentage) item.rectifyPercentage = 0
          timeData.push(item.createTime)
          statusCountData.push(item.statusCount)
          overdueCountData.push(item.overdueCount)
          rectifyPercentageData.push(item.rectifyPercentage * 100)
        })
        const chartDom = document.getElementById(id)
        const myChart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            x: 25,
            y: 45,
            x2: 45,
            y2: 20
          },
          color: ['#3dd598', '#5f8bff', '#f2a536'],
          legend: {
            data: ['当日全部事件', '当日已逾期', '按期整改率'],
            right: '0%'
          },
          xAxis: [{
            type: 'category',
            data: timeData,
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: [{
              type: 'value',
              name: '',
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '',
              min: 0,
              max: 100,
              interval: 25,
              axisLabel: {
                formatter: '{value}%'
              }
            }
          ],
          series: [{
              name: '当日全部事件',
              type: 'bar',
              data: statusCountData
            },
            {
              name: '当日已逾期',
              type: 'bar',
              data: overdueCountData
            },
            {
              name: '按期整改率',
              type: 'line',
              yAxisIndex: 1,
              data: rectifyPercentageData
            }
          ]
        }
        // 移除鼠标移动变色效果
        option && myChart.setOption(option)
      },
      // 平均按期整改率 环形图
      initPriorityPic(id, value) {
        const chartDom = document.getElementById(id)
        const myChart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'item',
            show: false
          },
          graphic: [{ // 环形图中间添加文字
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: value * 100 + '%',
              textAlign: 'center',
              fill: '#3cbdff',
              fontSize: 24
            }
          }],
          color: ['#3cbdff', '#f1f1f1'],
          series: [{
            type: 'pie',
            radius: ['75%', '100%'],
            hoverAnimation: false, // 鼠标移动动画效果
            label: {
              show: false,
              position: 'none'
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [{
              value: value
            }, {
              value: 1 - value
            }]
          }]
        }
        // 移除鼠标移动变色效果
        myChart.on('mouseover', e => {
          const op = myChart.getOption()
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: e.dataIndex,
            color: e.color
          })
          myChart.setOption(op, true)
        })
        option && myChart.setOption(option)
      },

      // 优先级分布
      initPriorityDistributionPic(id, data) {
        console.log(data)
        let hightValue
        let middleValue
        let downValue
        data.forEach((item) => {
          if (item.priority == 1) hightValue = item.num
          if (item.priority == 2) middleValue = item.num
          if (item.priority == 3) downValue = item.num
        })
        const chartDom = document.getElementById(id)
        const myChart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'center',
            right: '5%',
            orient: 'vertical',
            icon: 'circle', //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
            itemGap: 30, // 设置间距，
            textStyle: { // 图例文字的样式
              fontSize: 16
            },
            formatter: function(name) {
              let total = 0 // 总数
              let target = 0 // 数量
              let proportion
              for (let i = 0, l = data.length; i < l; i++) {
                total += data[i].num
                if (data[i].priority == 1) data[i].priority = '高'
                if (data[i].priority == 2) data[i].priority = '中'
                if (data[i].priority == 3) data[i].priority = '低'

                if (data[i].priority == name) {
                  target = data[i].num
                }
              }

              if (total == 0) {
                proportion = '0.00'
              } else {
                proportion = ((target / total) * 100).toFixed(2)
              }

              const arr = [
                name + '  ' + target + '  |  ' + proportion + '%'
              ]
              return arr
            }
          },
          series: [{
              name: '优先级分布',
              type: 'pie',
              radius: ['60%', '80%'],
              avoidLabelOverlap: false,
              z: 999,
              center: ['30%', '50%'],
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold',
                  formatter: '{d}%' // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
                }
              },

              labelLine: {
                show: false
              },
              data: [{
                  value: hightValue,
                  name: '高'
                },
                {
                  value: middleValue,
                  name: '中'
                },
                {
                  value: downValue,
                  name: '低'
                }
              ]
            },
            // 灰色背景环
            {
              type: 'pie',
              radius: ['60%', '80%'],
              avoidLabelOverlap: false,
              center: ['30%', '50%'],
              selectedMode: false,
              hoverAnimation: false,
              data: [{
                value: 1,
                name: ''
              }],
              itemStyle: {
                color: '#f1f1f1'
              },
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              tooltip: {
                show: false
              },
              animation: false,
              cursor: 'auto',
              emphasis: {
                itemStyle: {
                  color: '#f1f1f1'
                }
              }
            }
          ]
        }

        option && myChart.setOption(option)
      },

      // // 整改问题逾期情况-人员维度
      initStaffPic(id, data) {
        console.log(data)
        console.log(data['60%以上'])

        const staffData = [{
            name: '60%以上',
            value: data['60%以上']
          },
          {
            name: '50-60%',
            value: data['50-60%']
          },
          {
            name: '40-50%',
            value: data['40-50%']
          },
          {
            name: '30-40%',
            value: data['30-40%']
          }, {
            name: '20-30%',
            value: data['20-30%']
          },
          {
            name: '20%以下',
            value: data['20%以下']
          }
        ]
        const chartDom = document.getElementById(id)
        const myChart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '25%',
            right: '5%',
            orient: 'vertical',
            icon: 'circle', //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
            itemGap: 16, // 设置间距，
            textStyle: { // 图例文字的样式
              fontSize: 14
            },
            formatter: function(name) {
              var total = 0 // 总数
              var target // 人数
              for (var i = 0, l = staffData.length; i < l; i++) {
                total += staffData[i].value
                if (staffData[i].name == name) {
                  target = staffData[i].value
                }
              }
              let proportion
              if (total == 0) {
                proportion = '0.00'
              } else {
                proportion = ((target / total) * 100).toFixed(2)
              }
              var arr = [
                name + '             ' + target + '             ' + proportion + '%'

              ]
              return arr
            }
          },
          series: [{
              name: '优先级分布',
              type: 'pie',
              radius: ['60%', '80%'],
              avoidLabelOverlap: false,
              z: 999,
              center: ['30%', '50%'],
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold',
                  formatter: function(params) {
                    if (params.dataIndex >= 0) {
                      return params.percent + '%' + '\n' + params.name
                    }
                  }
                }
              },

              labelLine: {
                show: false
              },
              data: staffData
            },
            // 灰色背景环
            {
              type: 'pie',
              radius: ['60%', '80%'],
              avoidLabelOverlap: false,
              center: ['30%', '50%'],
              selectedMode: false,
              hoverAnimation: false,
              data: [{
                value: 1,
                name: ''
              }],
              itemStyle: {
                color: '#f1f1f1'
              },
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              tooltip: {
                show: false
              },
              animation: false,
              cursor: 'auto',
              emphasis: {
                itemStyle: {
                  color: '#f1f1f1'
                }
              }
            }
          ]
        }

        option && myChart.setOption(option)
      }
    }
  }
</script>

<style lang="scss">
  @import "~@/styles/variables.scss";
</style>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .crud-btn-container {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    border: 1px solid $my_primary;
    border-radius: 3px;

    .crud-item {
      color: $my_primary;
      cursor: pointer;
      padding: 0 10px;
      line-height: 27px;
      border-right: 1px solid $my_primary;
    }

    .crud-copy {
      border: none;
    }

    .crud-active {
      height: 27px;
      background-color: $my_primary;
      color: $my_white;

      &.crud-all {
        transform: translateX(-1px);
      }
    }
  }


  .search-box {
    padding: 16px 32px 0;
    display: flex;
    flex-wrap: wrap;
    background-color: #FFFFFF;
    box-shadow: 0 1px 6px rgba(55, 55, 55, .1);
    margin-bottom: 20px;

    .time-box {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .point-box {
      width: 780px;
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .item {
        display: flex;
        align-items: center;
        margin-right: 20px;
      }

      .item label {
        margin-right: 10px;
      }
    }

  }

  /*时间选项*/
  .time {
    border: 2px solid #00805a;
    display: flex;
    border-radius: 5px;
    margin-right: 20px;

    .item {
      padding: 0 18px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: #00805a;
      border-right: 2px solid #00805A;
      box-sizing: border-box;
      cursor: pointer;
    }

    .on {
      color: #FFFFFF;
      background-color: #00805a;
    }
  }

  /*工单总数*/
  .work-order {
    display: flex;
    margin-bottom: 20px;

    .item {
      flex: 1;
      padding: 16px 40px;
      background-color: #FFFFFF;
      border-radius: 5px;
      margin-right: 20px;
      box-shadow: 0 1px 4px rgba(55, 55, 55, .1);
      display: flex;
      align-items: center;

      .content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .number {
          display: flex;
          align-items: flex-end;
          margin-bottom: 8px;

          b {
            font-size: 22px;
            margin-right: 5px;
          }

          span {
            color: #00805A;
            font-size: 15px;
            position: relative;

            i {
              position: absolute;
              top: -6px;
              right: -10px;
              font-size: 18px;
            }
          }
        }

        p {
          width: 100%;
          margin: 0;
          font-size: 14px;
          color: #aaa9a9;
        }
      }

      .pie {
        width: 60px;
        height: 60px;
        margin-left: auto;
      }
    }

    .item:nth-child(4) {
      margin-right: 0;
    }
  }

  /*每日事件数量分布*/
  .daily-events {
    padding: 16px 20px;
    display: flex;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(55, 55, 55, 0.1);
    margin-bottom: 20px;

    .left-box {
      flex: 4;
      margin-right: 40px;

      p {
        margin: 0;
        font-size: 16px;
      }

      .daily-events-bar {
        width: 100%;
        height: 260px;
      }
    }

    .right-box {
      flex: 1;

      .priority {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        label {
          width: 50px;
          margin-right: 10px;
        }

        .opt {
          flex: 1;
          display: flex;
          align-items: center;
          padding: 4px;
          border: 1px solid #d4d4d4;
          box-sizing: border-box;
          border-radius: 50px;

          div {
            width: 60px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            border-radius: 50px;
            font-size: 14px;
            margin-right: 10px;
            cursor: pointer;
          }

          div:nth-child(4) {
            margin-right: 0;
          }

          .on {
            background-color: #3cbdff;
            color: #FFFFFF;
          }
        }
      }

      .pie {
        width: 100%;
        height: 180px;
      }

      p {
        text-align: center;
        font-size: 14px;
        color: #999;
      }
    }
  }

  /*优先级分布-问题项排名*/
  .priority-distribution {
    flex: 2;
    padding: 16px 20px;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(55, 55, 55, 0.1);
    margin-right: 20px;

    p {
      margin: 0;
      font-size: 16px;
    }

    .pie {
      width: 100%;
      height: 262px;
    }
  }

  .question {
    flex: 3;
    padding: 16px 20px;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(55, 55, 55, 0.1);

    .list-box {
      width: 100%;
      height: 240px;

      ul {
        width: 100%;
        height: 240px;
        overflow-y: scroll;
        margin: 0;
        padding: 0;

        li {
          list-style: none;
          margin: 0;
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          padding-right: 10px;

          i {
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            display: block;
            text-align: center;
            font-style: normal;
            border-radius: 50px;
            color: #FFFFFF;
            margin-right: 10px;
            background-color: #cccccc;
          }

          span {
            width: 80%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          b {
            width: 10%;
            text-align: center;
          }

          button {
            margin-left: auto;
          }
        }

        li:nth-child(1) i {
          background-color: #fd5a5a;
        }

        li:nth-child(2) i {
          background-color: #ff974a;
        }

        li:nth-child(3) i {
          background-color: #50b5ff;
        }
      }
    }
  }

  /*整改问题逾期情况*/
  .store-box {
    flex: 2;
    padding: 16px 20px;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(55, 55, 55, 0.1);
    margin-right: 20px;

    .title {
      margin-bottom: 10px;
    }

    .table {
      .header {
        display: flex;
        align-items: center;
        background-color: #f6f6f6;
        margin-bottom: 16px;
        padding: 0 10px;
        height: 30px;

        span {
          margin-left: auto;
        }
      }

      ul {
        width: 100%;
        height: 204px;
        overflow-y: scroll;
        margin: 0;
        padding: 0;

        li {
          list-style: none;
          margin: 0;
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          padding: 0 10px;

          i {
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            display: block;
            text-align: center;
            font-style: normal;
            border-radius: 50px;
            color: #FFFFFF;
            margin-right: 10px;
            background-color: #cccccc;
          }

          p {
            flex: 1;
            margin: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          b {
            width: 10%;
            text-align: center;
          }

          button {
            margin-left: auto;
          }
        }

        li:nth-child(1) i {
          background-color: #fd5a5a;
        }

        li:nth-child(2) i {
          background-color: #ff974a;
        }

        li:nth-child(3) i {
          background-color: #50b5ff;
        }
      }
    }
  }

  .staff-box {
    flex: 3;
    padding: 16px 20px;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(55, 55, 55, 0.1);
    position: relative;

    .title {
      margin-bottom: 0;
    }

    .staff-header {
      top: 70px;
      right: 85px;
      position: absolute;

      span:nth-child(2) {
        margin: 0 48px;
      }
    }

    .pic {
      width: 100%;
      height: 260px;
    }
  }

  /*共用样式*/
  .flex-box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    span {
      flex: 1;
      font-size: 16px;
    }

    i {
      width: 40px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      display: block;
      cursor: pointer;
      border-radius: 5px;
      font-size: 20px;
      font-weight: bold;
      color: #999;
    }

    i:active {
      background-color: #f9f9f9;
    }
  }
</style>
